import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import { Upload, UploadProps, UploadFile } from './upload';
import Icon from '../Icon/icon';

const defaultFileList: UploadFile[] = [
  { uid: '123', size: 1234, name: 'hello.md', status: 'uploading', percent: 30 },
  { uid: '122', size: 1234, name: 'xyz.md', status: 'success', percent: 30 },
  { uid: '121', size: 1234, name: 'eyiha.md', status: 'error', percent: 30 }
]

export default {
  title: 'Example/Upload',
  component: Upload,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

const Template: Story<UploadProps> = (args) => (<Upload {...args} style={{ marginLeft: '2em', width: "200px" }}>
   <Icon icon="upload" size="5x" theme="secondary" />
      <br/>
      <p>Drag file over to upload</p>
</Upload>);

const fileSize =  (file: File) => {
  if (Math.floor(file.size / 1024) > 50) {
    alert('太大了')
    return false;
  }
  return true;
}

const changeFile = (file: File) => {
  const newFile = new File([file], 'attr_name');
  return Promise.resolve(newFile);
}
// beforeUpload: changeFile,


export const ShowUpload = Template.bind({});
ShowUpload.args = {
  // https://www.mocky.io/v2/5cc8019d300000980a055e76
  action: 'http://localhost:3000/upload',
  onProgress: (percentage, file) => { console.log(percentage) },
  onSuccess: (data, file) => { console.log(data) },
  onError: (err, file) => { console.log(err) },
  defaultFileList: defaultFileList,
  onRemove: (file) => { alert(1) },
  name: 'filename',
  data: { 'key': 'value' },
  accept: '.png',
  multiple: true,
  drag: true
};
// headers: {'Z-D-Y': 'new-origin'}

